<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb>
      <el-breadcrumb-item to="/dashboard">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片 -->
    <el-card class="user-container">
      <!-- 按钮组 -->
      <el-row>
        <el-col :span="8"
          ><el-button type="danger" icon="el-icon-delete" size="small"
            >删除选中</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-circle-plus-outline"
            size="small"
            @click="handleAdd"
            >新增</el-button
          >
        </el-col>
        <el-col :span="8" :offset="8"
          ><el-input
            v-model="keywords"
            placeholder="需要查找的用户名"
            size="small"
          >
            <el-button slot="append" icon="el-icon-search"></el-button
          ></el-input>
        </el-col>
      </el-row>
      <!-- 数据表格 -->
      <el-table :data="users" stripe border>
        <el-table-column label="id" prop="id"></el-table-column>
        <el-table-column label="用户名" prop="username"></el-table-column>
        <el-table-column label="操作">
          <template v-slot="scoped">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click="handleEdit(scoped.row)"
              >编辑</el-button
            >
            <el-button type="danger" size="mini" icon="el-icon-delete"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <!--  -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[1, 2, 3, 5]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>

    <!-- 对话框 -->
    <!-- ref="form"  通过ref拿到表单对象  -->
    <el-dialog
      :title="isEdit ? '修改用户' : '添加用户'"
      :visible.sync="dialogVisible"
    >
      <el-form ref="form" :rules="rules" :model="form" label-width="80px">
        <el-form-item label="用户名" prop="username">
          <el-input
            placeholder="请输入用户名"
            v-model="form.username"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            placeholder="请输入用户名"
            v-model="form.password"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'User',
  data() {
    return {
      keywords: '',
      users: [
        // { id: 1, username: '小明1' },
        // { id: 2, username: '小明2' },
        // { id: 3, username: '小明3' },
      ],
      page: 1, //当前页吗数
      size: 5,
      total: 0,
      dialogVisible: false,
      form: {
        username: '',
        password: '',
      },
      rules: {
        username: [
          { required: true, message: '用户名不能为空', tigger: 'blur' },
        ],
        password: [{ required: true, message: '密码不能为空', tigger: 'blur' }],
      },
      isEdit: false,
    };
  },
  created() {
    this.getUsers();
  },
  methods: {
    getUsers() {
      this.$http
        .get(`/users?page=${this.page}&size=${this.size}`)
        .then((data) => {
          this.users = data.result.data;
          this.total = data.result.total;
        });
    },
    handleCurrentChange(p) {
      this.page = p;
      //重新获取新的分页数据
      this.getUsers();
    },
    handleSizeChange(s) {
      this.size = s;
      this.getUsers();
    },
    handleAdd() {
      this.dialogVisible = true;

      this.isEdit = false;
    },
    onSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.isEdit == false) {
            //发送请求 post请求,新增
            this.$http.post('/users', this.form).then((data) => {
              const { code, message, result } = data;
              if (code == 0) {
                //提示新增成功
                this.$message.success(message);
                //重新获取数据
                this.getUsers();

                //关闭对话框
                this.dialogVisible = false;

                //清空表单数据
                this.$refs['form'].resetFields();
              }
            });
          } else {
            //修改
            this.$http.put(`/users/${this.form.id}`, this.form).then((data) => {
              const { code, message, result } = data;
              if (code == 0) {
                //提示新增成功
                this.$message.success(message);
                //重新获取数据
                this.getUsers();

                //关闭对话框
                this.dialogVisible = false;

                //清空表单数据
                this.$refs['form'].resetFields();
              }
            });
          }
        }
      });
    },
    handleEdit(row) {
      console.log(row);

      //显示对话框
      this.dialogVisible = true;
      this.isEdit = true;

      //回显数据
      this.$http.get(`/users/${row.id}`).then((data) => {
        this.form = data.result;
      });
    },
  },
};
</script>

<style scoped>
/* scoped:(作用域)在这里写的样式仅仅会影响当前组件 */
.user-container {
  margin-top: 20px;
  /* height: 400px; */
}
.el-table {
  margin-top: 20px;
}
</style>
